<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"></link>
    <script th:src="@{/js/echarts.min.js}"></script>
    <script th:src="@{/js/jquery.min.js}"></script>
</head>
<body>
<h1>销量</h1>
<table class="table table-hover">
	<tr>
		<th>iPhone</th>
		<th>VIVO</th>
		<th>HUAWEI</th>
		<th>REDMI</th>
		<th>OPPO</th>
	</tr>
	
	<tr th:each="pl,stat:${pList}">
		<td th:text="${pl.iPhone}"></td>
		<td th:text="${pl.VIVO}"></td>
		<td th:text="${pl.HUAWEI}"></td>
		<td th:text="${pl.REDMI}"></td>
		<td th:text="${pl.OPPO}"></td>
	</tr>
</table>
<button type="button" class="btn btn-success" onclick="statistics()" >点击生产曲线图</button>
 <div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>
<script type="text/javascript">
function statistics() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));//statisticsBlue
    var moption1 = myChart.getOption();
    var iPhone = [];
    var VIVO = [];
    var HUAWEI = [];
    var REDMI = [];
    var OPPO = [];
    $.ajax({
        url: '/queryJSON',
        type: 'POST',
        dataType: 'JSON',
        success: function (data) {
        	console.log(data)
            var length = data.length;
            for (var i = 0; i < length; i++) {
                if (data[i]['iPhone'] !== null) {
                	iPhone.push(data[i]['iPhone'])
                	VIVO.push(data[i]['VIVO'])
                	HUAWEI.push(data[i]['HUAWEI'])
                	REDMI.push(data[i]['REDMI'])
                	OPPO.push(data[i]['OPPO'])
                }
            }
            // 指定图表的配置项和数据
            var option = {
            	    title: {
            	        text: '手机销量'
            	    },
            	    tooltip: {
            	        trigger: 'axis'
            	    },
            	    legend: {
            	        data: ['iPhone', 'VIVO', 'HUAWEI', 'REDMI', 'OPPO']
            	    },
            	    grid: {
            	        left: '3%',
            	        right: '4%',
            	        bottom: '3%',
            	        containLabel: true
            	    },
            	    toolbox: {
            	        feature: {
            	            saveAsImage: {}
            	        }
            	    },
            	    xAxis: {
            	        type: 'category',
            	        boundaryGap: false,
            	        data: ['一', '二', '三', '四', '五', '六', '七']
            	    },
            	    yAxis: {
            	        type: 'value'
            	    },
            	    series: [
            	        {
            	            name: 'iPhone',
            	            type: 'line',
            	            stack: '总量',
            	            data: iPhone
            	        },
            	        {
            	            name: 'VIVO',
            	            type: 'line',
            	            stack: '总量',
            	            data: VIVO
            	        },
            	        {
            	            name: 'HUAWEI',
            	            type: 'line',
            	            stack: '总量',
            	            data: HUAWEI
            	        },
            	        {
            	            name: 'REDMI',
            	            type: 'line',
            	            stack: '总量',
            	            data: REDMI
            	        },
            	        {
            	            name: 'OPPO',
            	            type: 'line',
            	            stack: '总量',
            	            data: OPPO
            	        }
            	    ]
            	};
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        error: function () {
            alert("失败")
        }
    })
}
</script>
 <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>